<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>老虎机</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit"><!--360默认为极速模式打开-->
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="Slot-style.css">
</head>>
<body>
    <div class=" ">
        <div class="container">
            <img src="images/bj1.png" alt="" class="bj"/>
            <div class="num row">
                <div class="col-md-1">
                    <!--<div class="a"></div>-->
                    <div><img src="images/number-blue-2.png" alt="" class="img1 a1"/></div>
                    <div><img src="images/number-blue-2.png" alt="" class="img1 a1"/></div>
                </div>
                <div class="col-md-1">
                    <!--<div class="a"></div>-->
                    <div style="margin-left: 40px"><img src="images/number-red-2.png" alt="" class="img1 a2"/></div>
                    <div style="margin-left: 40px"><img src="images/number-red-2.png" alt="" class="img1 a2"/></div>
                </div>
                <div class="col-md-1">
                    <!--<div class="a"></div>-->
                    <div style="margin-left:80px"><img src="images/number-green-2.png" alt="" class="img1 a3"/></div>
                    <div style="margin-left:80px"><img src="images/number-green-2.png" alt="" class="img1 a3"/></div>
                </div>
            </div>
            <input type="button" value="开始" class="btn"/>
            <div>
                <button class="btn2"><img src="images/tb2.png" alt="" class="jt"/></button>
            </div>
            <div>
                <img src="images/tb.png" alt="" class="tb"/>
            </div>
        </div>
    </div>
    <script type="text/javascript"  src="jquery.js"></script>
    <script type="text/javascript">
        $(".btn").click(function () {
            if(!flag){
                flag=true;
                reset();
                letGo();
                setTimeout(function () {
                    flag=false;
                    if(index==2){
                        $(".fix,.pop-form").show();
                    }else{
                        $(".fix,.pop").show();
                        $(".pop-text span").text(""+String(4-TextNum1)+(8-TextNum2))
                    }
                },4000);
                index++;
            }
        });

        var flag=false;
        var index=0;
        var TextNum1
        var TextNum2
        var TextNum3

        function letGo(){

            TextNum1=parseInt(Math.random()*4)//随机数
            TextNum2=parseInt(Math.random()*2)
            TextNum3=parseInt(Math.random()*5)

            var num1=[-120,-236,-348,-450][TextNum1];//在这里随机
            var num2=[-107,-109,-113,-205,-124,-136,-148,-200][TextNum2];
            var num3=[-17,-29,-41,-23,-154,-46,-258,-260][TextNum3];
            $(".a1").animate({"top":-240},1000,"linear", function () {
                $(this).css("top",0).animate({"top":num1},1000,"linear");
            });
            $(".a2").animate({"top":-240},1000,"linear", function () {
                $(this).css("top",0).animate({"top":num2},1800,"linear");
            });
            $(".a3").animate({"top":-240},1000,"linear", function () {
                $(this).css("top",0).animate({"top":num3},1300,"linear");
            });

        }

        function reset(){
            $(".a1,.a2,.a3").css({"top":-130});
        }
    </script>

</body>
</html>